<template>
  <el-dialog
      width="600px"
      title="添加跟进记录"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      append-to-body
  >
    <SubmitForm
        labelPosition="right"
        labelWidth="120px"
        :rule-form="form"
        :rules="rules"
        :form-list="formList"
        @save="onSave"
        @change="handleChange"
        @close="dialogVisible = false"
    >
    </SubmitForm>

  </el-dialog>
</template>

<script>
import { http } from '@/api'

export default {
  name: 'FollowupAdd',
  data() {
    return {
      dialogVisible: false,
      loading: false,
      form: {
        office_building_id: null,
        employee_id: '',
        employee_name: '',
        remark: '',
        images: []
      },
      rules: {
        employee_id: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入跟进备注', trigger: 'blur' }
        ]
      },
      formList: [
        {
          label: '写字楼名称',
          prop: 'office_building_id',
          name: 'select',
          clearable: true,
          disabled: true,
          options: []
        },
        {
          label: '员工姓名',
          prop: 'employee_id',
          name: 'select',
          clearable: true,
          options: []
        },
        {
          label: '跟进备注',
          prop: 'remark',
          name: 'input',
          type: 'textarea',
          width: '100%',
          clearable: true
        },
        {
          label: '跟进图片',
          prop: 'images',
          name: 'file',
          multiple: true,
          clearable: true
        }
      ]
    }
  },
  methods: {
    handleChange({ key, val}) {
      if (key === 'employee_id') {
        let find = this.formList[1].options.find(item => item.value == val)
        if (find) {
          this.form.employee_name = find.label
        }
      }
    },
    open(data) {
      this.dialogVisible = true
      this.form = {
        office_building_id: data.office_building_id,
        employee_id: '',
        employee_name: '',
        remark: '',
        images: []
      }
      http.officeBuilding.simpleList().then(res => {
        this.formList[0].options = res.data.map(item => {
          return {
            label: item.building_name,
            value: item.id
          }
        })
      })
      http.user.simpleList().then(res => {
        this.formList[1].options = res.data.map(item => {
          return {
            label: item.nickname,
            value: item.id
          }
        })
      })
    },
    async onSave() {
      try {
        this.loading = true
        await http.houseFollowup.create(null, {
          ...this.form,
        })
        this.$message.success('添加成功')
        this.dialogVisible = false
        this.$emit('success')
      } catch (error) {
        if (error !== false) {
          console.error('添加跟进记录失败:', error)
        }
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
